<!--
  ~ JBoss, Home of Professional Open Source.
  ~ Copyright 2014 Red Hat, Inc., and individual contributors
  ~ as indicated by the @@author tags.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  -->

<html>
<head>
  <title>WebSocket Chat</title>
  <script src="/~/asset/js/jquery.js"></script>
  <script src="/~/asset/js/jquery.ext.js"></script>
  <style type="text/css">
    html,body {
      width:100%;
      height:100%;
      background-color: black;
      color: beige;
    }

    body {
      height: 80%;
    }

    input {
      padding: 8px 5px;
    }

    .center {
      margin-left: auto;
      margin-right: auto;
      width: 70%;
    }

    .chatform {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0;
      width: 70%;
    }
    form{
      width: 100%;
    }
    label{
      display: inline;
      width: 100px;
    }
    #msg{
      display: inline;
      width: 100%;
    }

  </style>
</head>
<body>
<div class="page">
  <div class="center" >
    <h1>WebSocket @i18n("demo") - @i18n("chatroom")</h1>
    <div id="chat" style="height:100%;width: 100%; overflow: auto;">
    </div>
    <form onsubmit="return false;" class="chatform" action="">
      <label for="msg">@i18n("message")</label>
      <input type="text" name="message" id="msg"  onkeypress="if(event.keyCode==13) { send(this.form.message.value); this.value='' } " />
    </form>
  </div>
</div>
<script>
      var socket;

      function connect() {
          socket = $.createWebSocket('/msg');
          //socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/msg");
          socket.onmessage = function (event) {
              var home = document.getElementById('chat');
              home.innerHTML = home.innerHTML + event.data + "<br />";
          };
      }

      if (window.WebSocket) {
          connect();
      } else {
          alert("Your browser does not support Websockets. (Use Chrome)");
      }

      function send(message) {
          if (!window.WebSocket) {
              return false;
          }
          if (socket.readyState === WebSocket.OPEN) {
              socket.send(message);
          } else {
              reconnect(message);
          }
          return false;
      }

      function reconnect(message) {
          connect();
          setTimeout(function() {
            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
            } else {
                alert("The socket is not open.");
            }
          }, 500);
      }
  </script>
</body>
</html>
